<template>
	<view class="">
		<view class="text flex">
			{{title}}
			<view v-if="subTitle != ''" class="size3">
				{{subTitle}}
			</view>
		</view>
		<view class="flex">
			<!-- 上传图片 -->
			<view class="c_img" v-if="showImage">
				<easy-upload 
					 ref="image"
					:autoUpload="imageSetting.autoUpload" 
					:dataList="imageSetting.dataList" 
					types="image" 
					:uploadUrl="imgUploadUrl"
					:upload_max="imageSetting.upload_max" 
					:header="header" 
					:deleteUrl="deleteUrl" 
					:uploadCount="imageSetting.uploadCount"
					:clearIcon="imageSetting.clearIcon" 
					:uploadIcon="imageSetting.uploadIcon" 
					@successImage="successImage" 
					@delSuccess="delSuccess">
				</easy-upload>
			</view>
			<!-- 上传视频 -->
			<view class="c_img" v-if="showVideo">
				<easy-upload 
				ref="video"
					:autoUpload="videoSetting.autoUpload" 
					:dataList="videoSetting.dataList" 
					types="video" 
					:uploadUrl="videoUploadUrl"
					:header="header" 
					:deleteUrl="deleteUrl" 
					:uploadCount="videoSetting.uploadCount" 
					:clearIcon="videoSetting.clearIcon"
					:uploadIcon="videoSetting.uploadIcon" 
					@successVideo="successvideo" 
					@delSuccess="delSuccess">
				</easy-upload>
			</view>
		</view>

	</view>
</template>

<script>
	import easyUpload from '@/components/easy-upload/easy-upload.vue'
	export default {
		components: {
			easyUpload
		},
		props: {
			// 标题
			title: {
				type: String,
				default: "上传"
			},
			// 副标题
			subTitle: {
				type: String,
				default: ""
			},
			// 上传文件类型
			types: {
				type: Array,
				default: () =>{
					return ["image", "video"]
				}
			},
			/**
			 * 图片上传参数默认设置
			 * dataList: 默认图片路径
			 * autoUpload  | Boolean | 否 | 自动上传 默认false
			 * dataList  | Array | 否 | 图片/视频数据展示
			 * clearIcon  | String | 否 | 删除图标(可以换成自己的图片)
			 * uploadIcon  | String | 否 | 上传图标(可以换成自己的图片)
			 * uploadUrl  | String | 否 | 上传的接口
			 * deleteUrl  | String | 否 | 删除的接口
			 * uploadCount  | Number | 否 | 上传图片最大个数(默认为一张)
			 * upload_max  | Number | 否 | 上传大小(默认为1M)
			 */
			imageParams: {
				type: Object,
				default: {}
			},
			videoParams: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				imgUploadUrl: this.uploadUrl,
				videoUploadUrl: this.uploadVideoUrl,
				deleteUrl: "",
				header: {
					Authorization: "Bearer " + uni.getStorageSync('token')
				},
				// 文件路径
				picArr: [],
				videoArr: [],
				showImage: true,
				showVideo: true,
				defaultSetting: {
					dataList: [],
					autoUpload: true,
					clearIcon: "/static/x.png",
					uploadIcon: "",
					uploadCount: 1,
					upload_max: 1
				},
				imageSetting: {},
				videoSetting: {}
			}
		},
		created() {
			if (this.types.indexOf("image") == -1) {
				this.showImage = false
			}
			if (this.types.indexOf("video") == -1) {
				this.showVideo = false
			}
			this.imageSetting = this.$u.deepMerge(this.defaultSetting, this.imageParams);
			this.videoSetting = this.$u.deepMerge(this.defaultSetting, this.videoParams);
			// console.log(this.videoSetting)
		},
		methods: {
			successImage(e) {
				let data = JSON.parse(e.data);
				console.log('data',data)
				if (data.code == 200) {
					this.picArr.push(data.fileName);
					this.$emit("onSuccess", this.picArr, "image")
				} else {
					uni.showToast({
						title:'上传失败',
						icon:'none'
					})
				}
				if (this.picArr.length > 0) {
					this.showVideo = false;
				}
			},
			successvideo(e) {
				let data = JSON.parse(e.data);
				console.log(data)
				if (data.code == 200) {
					this.videoArr.push(data.fileName)
					this.$emit("onSuccess", this.videoArr, "video",data.previewImg)
				} else {
					uni.showToast({
						title:'上传失败',
						icon:'none'
					})
				}
				
				if (this.videoArr.length > 0) {
					this.showImage = false;
				}
			},
			/**
			 * @param {Object} index	文件下标
			 * @param {Object} types	文件类型
			 */
			delSuccess(index, types) {
				let arr = []
				
				if (types == "image") {
					this.picArr.splice(index, 1)
					arr = this.picArr;
				} else if (types == "video") {
					this.videoArr.splice(index, 1)
					arr = this.videoArr;
				}
				if (this.videoArr.length == 0 && this.types.indexOf("image") > -1) {
					// console.log(this.picArr)
					this.showImage = true;
				}
				if (this.picArr.length == 0 && this.types.indexOf("video") > -1) {
					// console.log(this.videoArr)
					this.showVideo = true;
				}
				this.$emit("onRemove",arr, types)
			},
			// 清空数据
			reset(types){
				if (types == "image") {
					this.picArr = [];
					this.$refs.image.reset()
				}
				if (types == "video") {
					this.videoArr = [];
					this.$refs.video.reset()
				}
			},
		}
	}
</script>

<style>
	.size3 {
		color: #D9001B;
		font-size: 25rpx;
		padding-left: 15rpx;
		/* padding: 10rpx 10rpx 0rpx 15rpx; */
	}
	
	.text {
		margin-bottom: 10rpx;
		padding-left: 10rpx;
		border-left: 4rpx solid rgba(49, 202, 217, 1);
		font-size: 32rpx;
		font-weight: 600;
		align-items: flex-end;
	}
</style>
